'use client'
import React,{useState} from "react"
import styles from "./page.module.sass"
import {Button, Form, Input, message} from "antd";
import {LockOutlined, MobileOutlined} from "@ant-design/icons";
import {logInByPhoneNumberAndPassword} from "../../apis/AuthorizationApi";
import employeeAuthorizationStore from "../../store/EmployeeAuthorizationStore";
import {observer} from "mobx-react-lite";
import {getMe} from "../../apis/EmployeeApi";
import {useNavigate} from "react-router";
import {Response} from "@zxy-cn/fetcher";
import {ProblemDetail} from "../../types/BasicModels";

export interface pageProps {

}

const LogInPage: React.FC<pageProps> = (props) => {
    let navigate = useNavigate();
    const [messageApi, contextHolder] = message.useMessage();
    const [loading,setLoading] = useState(false)
    return <>
        {contextHolder}
        <div className={styles.container}>
            <div className={styles.loginPanel}>
                <h2 className={styles.title}>登录</h2>
                <Form
                    layout={"vertical"}
                    name={"logInByPhoneNumberAndPassword"}
                    initialValues={{remember: true}}
                    onFinish={(values) => {
                        setLoading(true)
                        logInByPhoneNumberAndPassword(values).then((v) => {
                            employeeAuthorizationStore.setAuthorization(v.data);
                            getMe().then(value => {
                                employeeAuthorizationStore.setEmployee(value.data)
                                navigate("/dashboard")
                            }).finally(()=>{
                                setLoading(false)
                            })
                        }).catch((response: Response<ProblemDetail>) => {
                            if (response.status === 404) {
                                messageApi.error("用户不存在或者密码错误")
                            }
                            if (response.status===403){
                                if (response.data.detail==="DISABLED"){
                                    messageApi.error("此账号已被禁用")
                                }
                            }
                            setLoading(false)
                        })
                    }}
                >
                    <Form.Item
                        name="enterpriseCode"
                        label={"企业代码"}
                        rules={[{required: true}]}
                    >
                        <Input prefix={<MobileOutlined className="site-form-item-icon"/>} placeholder="企业代码"/>
                    </Form.Item>
                    <Form.Item
                        name="phoneNumber"
                        label={"手机号"}
                        rules={[{required: true}]}
                    >
                        <Input prefix={<MobileOutlined className="site-form-item-icon"/>} placeholder="手机号"/>
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label={"密码"}
                        rules={[{required: true}]}
                    >
                        <Input.Password
                            prefix={<LockOutlined className="site-form-item-icon"/>}
                            placeholder="密码"
                        />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit" className="login-form-button" block loading={loading}>
                            登录
                        </Button>
                    </Form.Item>
                </Form>

            </div>
        </div>
    </>
}

export default observer(LogInPage)